<template>
    <div class="index-page">
        <!--标题-->
        <van-nav-bar title="首页" placeholder fixed/>
        <!--轮播图-->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1baeae">
            <van-swipe-item>
                <img src="https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner-mate40.png">
            </van-swipe-item>
            <van-swipe-item>
                <img src="https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner2.png">
            </van-swipe-item>
            <van-swipe-item>
                <img src="https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner1.png">
            </van-swipe-item>
        </van-swipe>
        <!--金刚区-->
        <van-grid :column-num="5">
            <van-grid-item v-for="value in 10" :key="value" icon="photo-o" text="文字" />
        </van-grid>
        <!--商品类别名称-->
        <div class="shop-type-name">新品上线</div>
        <!--商品列表-->
        <div class="shop-box">
            <div class="shop-item" v-for="i in 4" :key="i">
                <img src="https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40pro%2B.png">
                <p>HUAWEI Mate 40 Pro+ 5G 全网通 12G...</p>
                <span>￥7988</span>
            </div>
        </div>
        <!--底部导航-->
        <van-tabbar v-model="active" fixed route>
            <van-tabbar-item icon="wap-home-o" to="/">首页</van-tabbar-item>
            <van-tabbar-item icon="apps-o">分类</van-tabbar-item>
            <van-tabbar-item badge="1" to="/shopCart" icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item icon="user-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>

export default {
  data() {
    return {
      active: 1,
    };
  },
};

</script>

<style scoped lang="less"> //使用less作为css预处理器
.shop-box{
    display: flex;
    flex-wrap: wrap;
    .shop-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 16px;
        box-sizing: border-box;
        width: 50%;
        img{
            width: 100px;
        }
        p{
            margin: 5px 0;
            text-align: center;
            font-size: 14px;
        }
        span{
            font-size: 14px;
            color: #1baeae;
        }
    }
    //& 代表父级
    & .shop-item:nth-child(2n-1){
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }
    & .shop-item:nth-child(2n){
        border-bottom: 1px solid #eee;
    }
}
.shop-type-name{
    width: 100%;
    height: 50px;
    color: #1daeae;
    font-size: 14px;
    text-align: center;
    line-height: 50px;
    background-color: #f9f9f9;
}
.my-swipe .van-swipe-item img {
    width: 100%;
    height: 200px;
}
</style>